<template>
    <div class="wrap">
        <div class="town-lib-select fixed">
            <div class="town-lib-tab-wrap">
                <ul class="town-lib-tab sec-part">
                   <li>小镇地区<i></i></li>
                   <li>产业类型<i></i></li>
                </ul>
                <div id="province-tab" class="tab-labels">
                    <span v-for="(item,index) in province"
                          :class="{'active':pIndex===index}"
                          :data-pcode="item.pcode"
                          @click="pClick(index)"
                    >{{item.name}}</span>
                </div>
                <div id="industry-tab" class="tab-labels">
                    <span v-for="(item,index) in industry"
                          :class="{'active':iIndex===index}"
                          :data-icode="item.icode"
                          @click="iClick(index)"
                    >{{item.name}}</span>

                </div>

                <!-- <el-menu class="el-menu-demo town-lib-tab" mode="horizontal" router>
                    <el-submenu index="1">
                        <template slot="title">小镇地区</template>
                        <el-menu-item class="el-menu-demo" mode="horizontal"
                            v-for="(item,i) in province"
                            :key="i"
                            :data-pcode="item.pcode"
                        >
                            {{ item.name }}
                        </el-menu-item>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title">产业类型</template>
                        <el-menu-item class="el-menu-demo" mode="horizontal"
                            v-for="(item,i) in industry"
                            :key="i"
                            :data-icode="item.icode"
                        >
                            {{ item.name }}
                        </el-menu-item>
                    </el-submenu>
                </el-menu> -->

            </div>
        </div>
        <div>
            <ul>
                <li v-for="item in townList">
                    <a href="/think_tank_town_detail/' + newObj.townid + '">
                        <img :src="item.image">
                        <p>{{item.name}}</p>
                    </a>
                </li>
            </ul>
        </div>
        <div class="wrap-bg"></div>
    </div>
</template>
<script>
export default{
    data(){
        return{

            province:[
                {name:"全国",pcode:"20099"},
                {name:"北京",pcode:"20001"},
                {name:"上海",pcode:"20002"},
                {name:"重庆",pcode:"20003"},
                {name:"天津",pcode:"20004"},
                {name:"河北",pcode:"20005"},
                {name:"山西",pcode:"20006"},
                {name:"辽宁",pcode:"20007"},
                {name:"吉林",pcode:"20008"},
                {name:"黑龙江",pcode:"20009"},
                {name:"江苏",pcode:"20010"},
                {name:"浙江",pcode:"20011"},
                {name:"安徽",pcode:"20012"},
                {name:"福建",pcode:"20013"}
            ],
            industry:[
                {name:"全部产业",icode:"21099"},
                {name:"高端装备制造业",icode:"21001"},
                {name:"新兴信息产业",icode:"21002"},
                {name:"文化产业",icode:"21003"},
                {name:"旅游产业",icode:"21004"},
                {name:"健康产业",icode:"21005"},
                {name:"时尚产业",icode:"21006"},
                {name:"金融产业",icode:"21007"},
                {name:"农林牧渔产业",icode:"21008"},
                {name:"综合产业",icode:"21009"},
                {name:"教育卫生产业",icode:"21010"}
            ],
            pIndex:0,
            iIndex:0,
            townList:[],
            pageNum:1,
            pageSize:10,
        }
    },
    mounted(){
         this.getTownlist(this.nowIndex)
    },
    methods:{
        pClick(index){
            pIndex=index
        },
        iClick(index){
            iIndex=index
        },
        getTownlist(nowIndex){
            setTimeout(() => {
              this.$axios.get('/api/townList', {
                    params:{
                        'page': pageNum,
                        'limit' : pageSize,
                        'province': 20025,
                        'industry': 21099
                    }
                })
                .then((res) => {
                  this.townList=res.data.data.townList
                  console.log(this.townList)
                }, (err) => {
                  console.log(err)
                })
            }, 500)
        }
    }
}
</script>
<style type="text/css">
.town-lib-select{}
.town-lib-tab-wrap{
    border-bottom: 1px solid #e7e7e7;
    position: relative;
    background-color: #fff;
}
.town-lib-tab{
    width: 100%;
    height: 50px;
}
.town-lib-tab li{
    width:50%;
    line-height: 50px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
}
.town-lib-tab li i{
    width:18px;
    height: 10px;
    background:url(../../common/img/i-arrow-down1.png) no-repeat;
    background-size: 100% 100%;
    margin:0px 8px;
    transition:0.3s;
    -webkit-transition:0.3s;
    -moz-transition:0.3s;
    -ms-transition:0.3s;
    -o-transition:0.3s;
}
.town-lib-tab li i.active{
    background:url(../../common/img/i-arrow-down.png) no-repeat;
    background-size: 100% 100%;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}
.town-lib-select .tab-labels{
    width:100%;
    background-color: #fff;
    box-sizing: border-box;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    padding:10px;
    border-top:1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
    transition: 0.3s;
    position: absolute;
    top:49px;
    left:0;
    z-index: 200;
    display: none;
}
.town-lib-select .tab-labels.show{display: block;}
.town-lib-select .tab-labels span{
    display: inline-block;
    height: 36px;
    line-height: 36px;
    padding:0 12px;
    cursor: pointer;
    transition: 0.3s;
    -webkit-transition: 0.3s;
}
.town-lib-select .tab-labels span.active{
    color:#3d7fd5;
}
.town-list-wrap{
    width: 100%;
    position: fixed;
    bottom: 0;
    height: auto;
    padding-top: 101px;
    overflow-y:auto;
}
.wrap-bg{
    width: 100%;
    height: 100%;
    position: fixed;
    left:0;
    top:0;
    background: rgba(0,0,0,.5);
    z-index: 100;
    display: none;
}
.town-list{width: 100%;}
.town-list li{
    box-sizing: border-box;
    padding:16px 0 0 0;
    width:100%;
    margin:0 auto;
    overflow: hidden;
    border-bottom: 1px solid #e7e7e7;
}
.town-list li img{
    width: 310px;
    height: 156px;
    display: block;
    margin: 0 auto;
}
.town-list li p{
    line-height: 40px;
    text-align: center;
}
.fixed{
    position: fixed;
    top:50px;
    left: 0px;
    width: 100%;
    z-index: 500;
}
</style>
